<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch-举例</title>
</head>
<body>

<div id="app">

    <div>
        question: <input type="text" id="question">
    </div>
    <div id="answer">

    </div>

</div>

</body>
<script>


    var question = document.getElementById('question');

    question.onkeyup = function () {

        var questionText = this.value;



        /**
         *  版本1
         * */
        //
        //var answerText = getAnswer1(questionText);
        //
        // var answer = document.getElementById('answer');
        //
        // answer.innerText = answerText;

        /**
         * 版本2
         * */

        getAnswer2(questionText,function (result){
            var answer = document.getElementById('answer');

            answer.innerText = result;
        })

    }

    function getAnswer1(question) {

        var answer = 'the answer is : the answer for ' + question;

        return answer;
    }


    function getAnswer2(question,callback) {

        var answer = '';

        setTimeout(function (){
            answer =  'the answer is : the answer for ' + question;
            callback(answer);
        },2000);


    }


</script>
</html>